<template>
  <div
    id="chart"
    style="
      width: 350px;
      height: 220px;
      background-color: rgb(237, 252, 223);
      margin: 15px 0;
    "
    ref="chart"
  ></div>
</template>
<script>
//import * as Echarts from 'echarts';
export default {
  name: "echarts01",
  data() {
    return {
      chart: null,
    };
  }, //图表实例
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //2.初始化
      this.chart = this.$Echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        xAxis: {
          data: ["05/15", "05/19", "05/23", "05/27", "05/31"],
        }, //X轴
        yAxis: {
          data: ["煎蛋", "蛋黄", "蛋壳", "剥壳"],
        }, //Y轴
        series: [
          {
            symbolSize: 10,
            data: [["05/27", "蛋壳"]],
            type: "scatter",
          },
        ],
      };
      // 4.传入数据
      this.chart.setOption(option);
    },
  },
};
</script>
